<script lang="ts" setup>
    import API from '@/services';
    import { reactive, ref,defineExpose } from 'vue';
    import { useRoute } from 'vue-router';
    import AddTableIntegrated from '../tableIntegrated/index.vue'
    import {FieldList} from '@/constants/dataManage'
    import { ElMessageBox } from 'element-plus/lib/index'
    const route = useRoute();
    let id = ref(route.query.id);
    // 新增字段
    const addFieldvisible = ref<boolean>(false)

    const updateTable = ref<string>('updateTable')
    const addTableRef = ref()
    const form = ref()

    const visibleDrawer = () => {
        addFieldvisible.value = true
    }
    const emit = defineEmits(['addField'])
    const handleOk = async () => {
        const getChildTable = addTableRef.value.exposeFn()
        if (!getChildTable.data?.length) return;
        getChildTable.data.forEach((item:any) => {
            delete item.disabled
        })
        const params = {
            fieldList: FieldList(getChildTable),
            id: id.value as any
        }
        try {
            const {code, data} = await API.dataTable.postDataTableUpdateTable({
                ...params
            })
            if (code === 200) {
                addFieldvisible.value = false;
                ElMessageBox.alert('增加字段操作可能会持续一段时间，请耐心等待', '提示', {
                    confirmButtonText: '我知道了',
                    callback: () => {},
                })
                emit('addField')
            }
        } catch (error) {
            console.log(`接口调用失败了${error}`)
        }
    };
    defineExpose({ visibleDrawer })
</script>

<template>
    <a-drawer 
        :visible="addFieldvisible" 
        @ok="handleOk" 
        @cancel="() => addFieldvisible = false" 
        :esc-to-close = "false"
        :mask-closable="false"
        placement="right"
        width="684px"
        title="修改表结构"
        unmountOnClose>
        <a-form  :model="form" ref="formRef">
            <a-form-item class="extra-add-feild">
                <template #label >
                    表结构：
                </template>
                <template #extra>
                    <add-table-integrated ref="addTableRef" :updateTable="updateTable"></add-table-integrated>
                </template>
            </a-form-item>
        </a-form>
    </a-drawer>

</template>

<style lang="scss" scoped>
    .table-top {
        display: flex;
        justify-content: space-between;
    }
    .extra-add-feild :deep(.arco-form-item-extra) {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .extra-add-feild :deep(.arco-form-item-label-col) {
            justify-content: flex-start;
    }
    .extra-add-feild :deep(.add-table-field) {
        margin-left: -150px;
    }
</style>